<template>
  <div>
    <div class="commentFuns">
      <div class="title">
        <i class="iconfont icon-xiangzuo" @click="$router.go(-1)"></i>
        <p>书评区</p>
      </div>

      <div class="commentCon">
        <div class="commentConHead">
          <div class="img">
            <img :src="comment.img" />
          </div>
          <h1>{{ comment.title }}</h1>
          <div class="star">
            <i class="iconfont icon-star-full"></i>
            <i class="iconfont icon-star-full"></i>
            <i class="iconfont icon-star-full"></i>
            <i class="iconfont icon-star-full"></i>
            <i class="iconfont icon-star-full"></i>

            <span class="left"></span>
            <span class="right"></span>
          </div>
          <div class="score">评分 {{ comment.scoring }} 分</div>
        </div>

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="commentContent">
            <div class="cConTitle">精彩评论</div>
            <ul>
              <li v-for="(item, index) in hot" :key="index">
                <div class="img">
                  <img :src="item.img" />
                </div>
                <div class="comtext">
                  <div class="comTextHead">
                    <h1>{{ item.name }}</h1>
                  </div>
                  <div class="cont">
                    {{ item.talk }}
                  </div>
                  <div class="comTextBtm">
                    <div class="date">{{ item.date }}</div>

                    <div class="conIcon">
                      <div class="left">
                        <i class="iconfont icon-pinglun"></i>
                        <span>{{ item.num }}</span>
                      </div>

                      <div class="right">
                        <i
                          class="iconfont icon-dianzan"
                          v-if="!item.flagBtn"
                          @click="hotUp(index)"
                        ></i>
                        <i
                          class="dz iconfont icon-dianzan1"
                          v-else-if="item.flagBtn"
                          @click="hotDown(index)"
                        ></i>
                        <span>{{ item.goods }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="newCommentContent">
            <div class="cConTitle">最新评论</div>
            <ul>
              <li v-for="(item, index) in talk" :key="index">
                <div class="img">
                  <img :src="item.img" />
                </div>
                <div class="comtext">
                  <div class="comTextHead">
                    <h1>{{ item.name }}</h1>
                  </div>
                  <div class="cont">{{ item.talk }}</div>
                  <div class="comTextBtm">
                    <div class="date">{{ item.date }}</div>

                    <div class="conIcon">
                      <div class="left">
                        <i class="iconfont icon-pinglun"></i>
                        <span>{{ item.num }}</span>
                      </div>

                      <div class="right">
                        <i
                          class="iconfont icon-dianzan"
                          v-if="!item.flagBtn"
                          @click="newUp(index)"
                        ></i>
                        <i
                          class="dz iconfont icon-dianzan1"
                          v-else-if="item.flagBtn"
                          @click="newDown(index)"
                        ></i>
                        <span>{{ item.goods }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-list>
      </div>

      <div class="commendBtn" @click="showPopup">
        <i class="iconfont icon-xiepinglun"></i>
        写评论
      </div>

      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <div class="ipt">
          <button type="button" @click="showPopDown">发布</button>

          <textarea
            name="comm"
            id=""
            cols="30"
            rows="10"
            v-model="message"
            placeholder="写下优质评论，有机会得到作者回复哦(800字以内)"
          ></textarea>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getSynopsis, getFens } from "../../api/content";
import { getUsersInfo } from "../../api/userInfo";
export default {
  data() {
    return {
      show: false,
      list: [],
      loading: false,
      finished: false,
      // flag: true,
      comment: [],
      hot: [],
      talk: [],
      message: null,
      num: 0,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    showPopDown() {
      this.show = false;

      getUsersInfo().then((data) => {
        // console.log(data);
        var day =
          (new Date().getMonth() + 1 > 10
            ? new Date().getMonth() + 1
            : "0" + (new Date().getMonth() + 1)) +
          "." +
          new Date().getDate();

        console.log(day);
        this.talk.unshift({
          img: data.img,
          name: data.username,
          talk: this.message,
          num: 0,
          goods: 0,
          date: day,
        });
      });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    hotUp(index) {
      this.hot[index].flagBtn = true;
      this.hot[index].goods += 1;
    },
    hotDown(index) {
      this.hot[index].flagBtn = false;
      this.hot[index].goods -= 1;
    },
    newUp(index) {
      this.talk[index].flagBtn = true;
      this.talk[index].goods += 1;
    },
    newDown(index) {
      this.talk[index].flagBtn = false;
      this.talk[index].goods -= 1;
    },
    getFensFun() {
      getFens().then((data) => {
        console.log(data);
        this.hot = data.fens.hot;
        data.fens.new.forEach((item) => {
          this.talk.push(item);
        });
        console.log(this.talk);
      });
    },
  },
  created() {
    this.$emit("getnavs-btn", false);
    let queryId = this.$route.query.id;
    getSynopsis().then((data) => {
      let index = data.synopsis.findIndex((item) => item.id == queryId);

      this.comment = data.synopsis[index];
    });
    this.getFensFun();
  },
};
</script>

<style lang="less">
.commentFuns {
  margin-bottom: 50px;
  .title {
    position: fixed;
    width: 100%;
    min-height: 50px;
    display: flex;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    z-index: 1;
    i {
      flex: 0 0 40px;
      font-size: 25px;
    }
    p {
      flex: 1;
      margin-right: 30px;
    }
  }
  .commentCon {
    padding-top: 50px;
    width: 100%;
    .commentConHead {
      background-color: #fff;
      padding: 5px 25px;
      text-align: center;
      .img {
        width: 100px;
        margin: auto;
        img {
          width: 100px;
          height: 120px;
        }
      }
      h1 {
        padding: 10px;
        font-size: 20px;
      }
      .star {
        color: rgb(254, 213, 48);
        width: 120px;
        margin: auto;
        padding: 4px 0;
        position: relative;
        i {
          padding: 4px;
        }
        .left,
        .right {
          display: block;
          width: 80px;
          height: 2px;
          background-color: #f6f7f9;
          position: absolute;
          top: 12px;
        }
        .left {
          left: -88px;
        }
        .right {
          right: -88px;
        }
      }

      .score {
        padding: 10px;
        color: #969799;
        font-size: 14px;
      }
    }
    .commentContent,
    .newCommentContent {
      margin-top: 6px;

      .cConTitle {
        padding: 15px;
        font-size: 13px;
        background-color: #fff;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 4px;
          height: 15px;
          background-color: rgb(35, 179, 130);
          position: absolute;
          top: 13px;
          left: 0;
        }
      }

      ul {
        li {
          background-color: #fff;
          display: flex;
          padding: 15px;
          margin-top: 2px;
          .img {
            padding-right: 8px;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
          .comtext {
            position: relative;
            .comTextHead {
              padding: 8px 0;
              h1 {
                font-size: 13px;
                color: #969799;
              }
            }
            .cont {
              width: 300px;
              font-size: 13px;
              line-height: 20px;
              color: #333;
              overflow: hidden;
            }
            .comTextBtm {
              margin-top: 8px;
              margin-bottom: 15px;
              display: flex;
              justify-content: space-between;
              align-items: baseline;
              color: #969799;
              .date {
                font-size: 12px;
              }
              .conIcon {
                display: flex;
                .left {
                  margin-right: 10px;
                }
                .right {
                  .dz {
                    color: #ff6700;
                  }
                }
                span {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
  .commendBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #f6f7f9;
    text-align: center;
    line-height: 50px;
    color: rgb(35, 179, 130);
  }
  .ipt {
    padding: 10px;
    button {
      background-color: rgb(35, 179, 130);

      color: #fff;
      border: 0;
      padding: 8px 12px;
      font-size: 12px;
      margin-bottom: 8px;
      margin-left: 85%;
    }
    textarea {
      width: 100%;
      height: 120px;
      border: 0;
      padding: 10px;
      box-sizing: border-box;
      background-color: #f6f7f9;
    }
  }
}
</style>